<template>
  <div>
    <el-form :inline="true" :modal="searchDto" ref="searchForm">
      <el-form-item prop="calloutProvince" label="调出省份">
        <v-distpicker @selected="OnCalloutProvinceSelected" :provinceOut="searchDto.calloutProvince" only-province></v-distpicker>
      </el-form-item>
      <el-form-item prop="receiveProvince" label="接收省份">
        <v-distpicker @selected="OnReceiveProvinceSelected" :provinceOut="searchDto.receiveProvince" only-province></v-distpicker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchDto.modelId" clearable placeholder="型号">
          <el-option
            v-for="item in modelOptions"
            :key="item.id"
            :label="item.code"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="excelExport()">数据导出</el-button>
      </el-form-item>
    </el-form>
    <custom-table
      :data="allocateList"
      :columns="columns"
      :tableLoadingFlag="tableLoadingFlag"
      :pagination="pagination">
    </custom-table>
  </div>
</template>

<script>
  import CustomTable from '@/components/table/CustomTable'
  import { apiGetAllocateList, apiSpareAllotExport } from '@/api/search/standby/index'
  import { parseTime } from '@/utils'
  import { apiGetModelList } from '@/api/dictionary'
  import {downloadExcel} from "../../../utils";
  export default {
    components: {
      CustomTable
    },
    created () {
      let listQuery = {
        pageNumber: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      this.getAllocateList(listQuery)
    },
    data () {
      return {
        tableLoadingFlag: false,
        columns: [
          {label: '调出省份', name: 'calloutProvince', align: 'center'},
          {label: '接收省份', name: 'receiveProvince', align: 'center'},
          {label: '申请人姓名', name: 'proposer', align: 'center'},
          {label: '申请时间', name: 'applicationDate', align: 'center', formatter: this.formatTime},
          {label: '型号', name: 'modelName', align: 'center'},
          {label: '台数', name: 'num', align: 'center'},
          {label: '审批时间', name: 'approveDate', align: 'center', formatter: this.formatTime},
          {label: '审批人', name: 'approverName', align: 'center'},
          {label: '审批状态', name: 'applicationStatus', align: 'center'},
          {label: '原因', name: 'cause', align: 'center'},
          {label: '调拨人', name: 'issuerName', align: 'center'},
          {label: '调拨时间', name: 'distributeDate', align: 'center', formatter: this.formatTime},
          {label: '调拨数量', name: 'distributeNum', align: 'center'},
          {label: '接收人', name: 'receiver', align: 'center'},
          {label: '接收时间', name: 'receiveDate', align: 'center', formatter: this.formatTime},
          {label: '单位', name: 'unit', align: 'center'}
        ],
        allocateList: [],
        pagination: this.getData(this.getAllocateList),
        searchDto: {
          calloutProvince: '',
          receiveProvince: '',
          modelId: ''
        },
        modelOptions: this.selectedModelInit(),
        listQuery: {
          calloutProvince: undefined,
          receiveProvince: undefined,
          modelId: undefined
        }
      }
    },
    methods: {
      excelExport() {
        let paramsPost = {
          modelId: this.searchDto.modelId,
          calloutProvince: this.searchDto.calloutProvince,
          receiveProvince: this.searchDto.receiveProvince
        }
        apiSpareAllotExport(paramsPost).then(response => {
          downloadExcel(response.data, '自有售后调拨申请记录信息导出表')
        }).catch(() => {
          console.log('error')
        })
      },
      getAllocateList (listQuery) {
        this.tableLoadingFlag = true
        if (this.listQuery.calloutProvince !== undefined) {
          listQuery.calloutProvince = this.listQuery.calloutProvince
        }
        if (this.listQuery.receiveProvince !== undefined) {
          listQuery.receiveProvince = this.listQuery.receiveProvince
        }
        if (this.listQuery.modelId !== undefined) {
          listQuery.modelId = this.listQuery.modelId
        }
        apiGetAllocateList(listQuery).then(response => {
          this.allocateList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      formatTime (row, column, cellValue) {
        return parseTime(cellValue)
      },
      searchData() {
        this.listQuery.calloutProvince = this.searchDto.calloutProvince
        this.listQuery.receiveProvince = this.searchDto.receiveProvince
        this.listQuery.modelId = this.searchDto.modelId
        this.pagination.currentPage = 1
        this.pagination.pageSize = 10
        this.getAllocateList(this.listQuery)
      },
      OnCalloutProvinceSelected(data) {
        this.searchDto.calloutProvince = data.province.code
      },
      OnReceiveProvinceSelected(data) {
        this.searchDto.receiveProvince = data.province.code
      },
      selectedModelInit () {
        apiGetModelList().then(response => {
          let modelList = response.data
          let model = []
          let temp = {}
          for (let i in modelList) {
            if (!temp[modelList[i].code]) {
              temp[modelList[i].code] = modelList[i].id
            }
          }
          model.push({'code': '全部型号', 'value': ''})
          for (let k in temp) {
            model.push({'code': k, 'id': temp[k]})
          }
          this.modelOptions = model
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      }
    }
  }
</script>
